<template>
  <div class="songs-container">
    <div class="outter">
      <div class="inner">
        <div class="tab-bar">
          <span class="item" :class="{ active: type == 0 }" @click="type = 0"
            >全部</span
          >
          <span class="item" :class="{ active: type == 7 }" @click="type = 7"
            >华语</span
          >
          <span class="item" :class="{ active: type == 96 }" @click="type = 96"
            >欧美</span
          >
          <span class="item" :class="{ active: type == 8 }" @click="type = 8"
            >日本</span
          >
          <span class="item" :class="{ active: type == 16 }" @click="type = 16"
            >韩国</span
          >
        </div>
      </div>
    </div>
    <!-- 底部的table -->
    <div
      class="scrollbox"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-custom-class="loading_color"
    >
      <my-scroll>
        <div class="outter">
          <div class="inner">
            <table
              class="el-table playlit-table"
              border="0"
              cellspacing="0"
              cellpadding="0"
              style="border: 0"
            >
              <thead>
                <th class="sort"></th>
                <th class="opera">操作</th>
                <th>音乐图片</th>
                <th>音乐标题</th>
                <th>歌手</th>
                <th class="zj">专辑</th>
                <th class="time">时长</th>
              </thead>
              <tbody>
                <tr
                  class="el-table__row"
                  v-for="(item, index) in songs"
                  :key="index"
                  @dblclick="playmusic(item)"
                >
                  <td
                    style="width: 50px;textAlign:center"
                    class="tr_sort"
                    v-html="index + 1 < 10 ? '0' + (index + 1) : index + 1"
                  ></td>
                  <td class="td_opera" style="width:70px">
                    <span
                      class="iconfont icon-triangle-down"
                      @click="playmusic(item)"
                    ></span>
                    <span
                      class="iconfont icon-xiazai"
                      @click="download(item)"
                    ></span>
                  </td>
                  <td style="width: 80px">
                    <div class="img-wrap">
                      <img
                        :src="item.album.blurPicUrl + '?param=100y100'"
                        alt
                      />
                      <span class="iconfont icon-play"></span>
                    </div>
                  </td>
                  <td style="padding:0px 15px">
                    <div class="song-wrap">
                      <div class="name-wrap">
                        <span>{{ item.name }}</span>
                        <span
                          v-if="item.mvid != ''"
                          class="iconfont icon-mv"
                          @click="toMv(item.mvid)"
                        ></span>
                      </div>
                    </div>
                  </td>
                  <td>{{ item.artists[0].name }}</td>
                  <td class="td_zj" style="padding:0px 15px">
                    {{ item.album.name }}
                  </td>
                  <td class="tr_time" style="width:80px;textAlign:center">
                    {{ item.duration | formDate }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </my-scroll>
    </div>
  </div>
</template>

<script>
import { MusicList } from "../../api/music"
import request from "../../api/request"
export default {
  name: "songs",
  data() {
    return {
      type: 0,
      allsongs: [],
      csongs: [],
      osongs: [],
      rsongs: [],
      hsongs: [],
      songs: [],
      loading: true,
    }
  },
  watch: {
    type(newValue, oldValue) {
      this.loading = true
      this.type = newValue
      switch (this.type) {
        case 0:
          if (this.allsongs.length) {
            this.songs = Object.freeze(this.allsongs)
            this.loading = false
          } else {
            this.getSongs(this.allsongs)
          }
          break
        case 7:
          if (this.csongs.length) {
            this.songs = Object.freeze(this.csongs)
            this.loading = false
          } else {
            this.getSongs(this.csongs)
          }
          break
        case 96:
          if (this.osongs.length) {
            this.songs = Object.freeze(this.osongs)
            this.loading = false
          } else {
            this.getSongs(this.osongs)
          }
          break
        case 8:
          if (this.rsongs.length) {
            this.songs = Object.freeze(this.rsongs)
            this.loading = false
          } else {
            this.getSongs(this.rsongs)
          }
          break
        case 16:
          if (this.hsongs.length) {
            this.songs = Object.freeze(this.hsongs)
            this.loading = false
          } else {
            this.getSongs(this.hsongs)
          }
      }
    },
  },
  filters: {
    formDate(date) {
      var m = parseInt(date / 1000 / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt((date / 1000) % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  created() {
    this.getSongs(this.allsongs)
  },
  methods: {
    // 获取排行榜的音乐
    async getSongs(array) {
      const res = await MusicList({
        type: this.type,
      })
      //对请求的数据进行切割,减少数据量
      // var result = res.data.slice(0, 30)
      var result = res.data
      switch (this.type) {
        case 0:
          this.allsongs = Object.freeze(result)
          break
        case 7:
          this.csongs = Object.freeze(result)
          break
        case 96:
          this.osongs = Object.freeze(result)
          break
        case 8:
          this.rsongs = Object.freeze(result)
          break
        case 16:
          this.hsongs = Object.freeze(result)
      }
      this.songs = Object.freeze(result)
      this.loading = false
    },
    // 点击播放歌曲
    async playmusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: 1 })
    },

    // 下载按钮
    async download(item) {
      let res = await request({
        url: "/song/url",
        data: {
          id: item.id,
        },
        method: "get",
      })
      if (res.data[0].url) {
        let url = res.data[0].url
        console.log(url)
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.target = "_Blank"
        link.setAttribute("download", "测试excel.xls")
        document.body.appendChild(link)
        link.click()
      } else {
        this.$notify.error({
          title: "错误",
          message: `歌曲 ${item.name} 是vip歌曲无法获取`,
        })
      }
    },
    toMv(id) {
      this.$router.push(`/details?id=${id}`)
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../scss/common.scss";
@media (max-width: 600px) {
  .songs-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 3.75rem;
  }
  .songs-container .tab-bar {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .tab-bar .item {
    font-size: 15px;
    color: gray;
    margin-right: 20px;
    cursor: pointer;
  }

  .songs-container .tab-bar .item.active {
    color: $primary;
  }
  .songs-container .scrollbox {
    height: calc(100% - 50px) !important;
    position: relative;
  }
  .songs-container .scrollbox .el-table {
    margin: 0px 20px;
    width: calc(100% - 40px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  tr {
    transition: 0.5s;
  }
  td {
    border: none;
  }
  .sort {
    display: none;
  }
  .opera {
    // display: none;
  }
  .time {
    display: none;
  }
  .zj {
    display: none;
  }
  .tr_sort {
    display: none;
  }
  .td_zj {
    display: none;
  }
  .tr_time {
    display: none;
  }
  .td_opera {
    // display: none;
  }
  .icon-xiazai {
    display: none;
  }
  .songs-container .song-table .song-wrap > span {
    margin-top: 20px;
    display: inline-block;
    color: #bebebe;
  }

  .icon-mv {
    padding-left: 5px;
    display: inline-block;
    color: $primary;
  }

  .img-wrap {
    position: relative;
    width: 60px;
    height: 60px;
  }

  .img-wrap img {
    width: 60px;
    height: 60px;
    border-radius: 5px;
  }

  .img-wrap .icon-triangle-down {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    color: rgb(98, 158, 218);
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: 0.5s;
  }
}
.icon-triangle-down {
  font-size: 13px;
}
@media (min-width: 600px) {
  .songs-container {
    width: 100%;
    height: 100%;
  }
  .songs-container .tab-bar {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .tab-bar .item {
    font-size: 15px;
    color: gray;
    margin-right: 20px;
    cursor: pointer;
  }

  .songs-container .tab-bar .item.active {
    color: $primary;
  }
  .songs-container .scrollbox {
    height: calc(100% - 50px) !important;
    position: relative;
  }
  .songs-container .scrollbox .el-table {
    margin: 0px 20px;
    width: calc(100% - 40px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  tr {
    padding: 0px 10px;
    box-sizing: border-box;
    transition: 0.5s;
    .iconfont:hover {
      color: $primary;
    }
    .iconfont:nth-child(1) {
      padding-right: 5px;
    }
  }
  tr:hover {
    cursor: pointer;
    background: rgb(236, 236, 236);
  }
  td {
    border: none;
  }
  .songs-container .song-table .song-wrap > span {
    margin-top: 20px;
    display: inline-block;
    color: #bebebe;
  }

  .icon-mv {
    padding-left: 5px;
    display: inline-block;
    color: $primary;
  }

  .img-wrap {
    position: relative;
    width: 70px;
    height: 70px;
  }

  .img-wrap img {
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }

  .img-wrap .icon-triangle-down {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    color: $primary;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: 0.5s;
  }

  .icon-triangle-down::before {
    transform: translateX(1px);
  }
  tr:hover .icon-triangle-down {
    opacity: 1;
  }
  .outter {
    width: 100%;
    display: flex;
    justify-content: center;
    .inner {
      width: 100%;
      max-width: 1200px;
    }
  }
}
.active {
  color: $primary;
}
.loading_color {
  color: $primary !important;
}
/deep/ .el-loading-spinner i {
  color: $primary !important;
}
/deep/ .el-loading-text {
  color: $primary !important;
}
</style>
